body {
	display: flex;
	flex-direction: column;
	main {
		background-color: #59b2db;
		color: #fff;
		padding: 1rem;
		flex-grow: 1;
		#top {
			justify-content: space-between;
			margin: 1rem 0;
			span {
				display: inline-block;
				margin-right: 1rem;
				font-size: 30px;
			}
		}
		#distance {
			text-align: center;
			font-size: 18px;
			height: 12rem;
			line-height: 12rem;

			span {
				font-size: 60px;
			}
		}
		#map {
			padding: 0 1.5rem;
			justify-content: space-between;
			align-items: baseline;
			margin-bottom: 4rem;

			.icon-map2 {
				font-size: 40px;
			}
		}
		#something {
			justify-content: space-between;
			margin-bottom: 2rem;
			padding: 0 1rem;
			span {
				display: block;
				text-align: center;
			}
			.bigger {
				font-size: 40px;
			}
			.big {
				font-size: 25px;
				margin-top: 2rem;
				font-weight: bold;
			}
			#clock {
				span {
					display: inline-block;
				}
			}
		}
		#pause {
			width: 7.5rem;
			height: 7.5rem;
			bottom: 3rem;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 2rem;
			padding-top: 2rem;
			color: #59b2db;
			.icon-pausen {
				font-size: 60px;
				display: block;
			}
			.caiyun {
				font-size: 20px;
				display: inline-block;
				margin-top: 5px;
				color: #817e7e;
			}
		}
		.icon-over2 {
			font-size: 60px;
			right: 3rem;
			bottom: 4.25rem;
			display: none;
		}
		#continue {
			width: 100%;
			bottom: 3rem;
			left: 50%;
			transform: translateX(-50%);
			display: none;

			span {
				display: block;
				width: 7.5rem;
				height: 7.5rem;
				border-radius: 50%;
				color: #fff;
				text-align: center;
				line-height: 7.5rem;
				font-size: 50px;
			}
			p {
				width: 100%;
				justify-content: space-around;
				& > span:first-child {
					background-color: #79f0c2;
				}
				& > span:last-child {
					background-color: #ff6060;
				}
			}
		}
	}
}
